<template>
  <div class="app-container">
    <div class="page-header">
      <h2>商品类别管理</h2>
      <p>管理商品分类信息，支持层级分类结构</p>
    </div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="分类名称" prop="categoryName">
        <el-input
          v-model="queryParams.categoryName"
          placeholder="请输入分类名称"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="父分类" prop="parentId">
        <el-input
          v-model="queryParams.parentId"
          placeholder="请输入父分类ID"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="排序方式" prop="sortOrder">
        <el-select
          v-model="queryParams.sortOrder"
          placeholder="请选择排序方式"
          clearable
          style="width: 120px"
        >
          <el-option label="最上方(1)" :value="1" />
          <el-option label="上方(2)" :value="2" />
          <el-option label="中间(3)" :value="3" />
          <el-option label="下方(4)" :value="4" />
          <el-option label="最下方(5)" :value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          style="width: 120px"
        >
          <el-option label="禁用" :value="0" />
          <el-option label="启用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['category:category:add']"
        >新增分类</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['category:category:edit']"
        >修改分类</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['category:category:remove']"
        >删除分类</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['category:category:export']"
        >导出数据</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="categoryList"
      @selection-change="handleSelectionChange"
      :empty-text="loading ? '加载中...' : '暂无数据'"
      stripe
      border
      highlight-current-row
    >
      <el-table-column type="selection" width="50" align="center" />

      <el-table-column label="父分类" align="center" prop="parentId" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.parentId === '0' || scope.row.parentId === 0">0</span>
          <span v-else>{{ scope.row.parentId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分类名称" align="center" prop="categoryName" min-width="200" />
      <el-table-column label="排序值" align="center" prop="sortOrder" width="90">
        <template slot-scope="scope">
          <el-tag :type="getSortOrderTagType(scope.row.sortOrder)">
            {{ getSortOrderText(scope.row.sortOrder) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="70">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-view"
            @click="handleViewGoods(scope.row)"
            v-hasPermi="['category:category:query']"
          >查看商品</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['category:category:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['category:category:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
    />

    <!-- 二级菜单商品信息弹出框 -->
    <el-dialog
      :title="goodsDialogTitle"
      :visible.sync="goodsDialogVisible"
      width="1200px"
      append-to-body
      class="goods-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="goods-dialog-content">
        <div class="category-info">
          <el-descriptions :column="3" border>
            <el-descriptions-item label="分类ID">{{ currentCategory.categoryId }}</el-descriptions-item>
            <el-descriptions-item label="分类名称">{{ currentCategory.categoryName }}</el-descriptions-item>
            <el-descriptions-item label="父分类ID">{{ currentCategory.parentId === '0' ? '顶级分类' : currentCategory.parentId }}</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <el-divider content-position="left">
          <i class="el-icon-goods"></i>
          <span>商品列表</span>
          <el-tag type="primary" size="small" style="margin-left: 10px;">共 {{ goodsList.length }} 件商品</el-tag>
        </el-divider>

        <el-table
          v-loading="goodsLoading"
          :data="goodsList"
          :empty-text="goodsLoading ? '加载中...' : '该分类下暂无商品'"
          stripe
          border
          highlight-current-row
          class="goods-table"
        >
          <el-table-column label="商品ID" align="center" prop="id" width="80" />
          <el-table-column label="商品名称" align="left" prop="goodsName" min-width="200">
            <template slot-scope="scope">
              <div class="goods-name">
                <i class="el-icon-goods"></i>
                <span>{{ scope.row.goodsName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品描述" align="left" prop="goodsDesc" min-width="250" show-overflow-tooltip />
          <el-table-column label="价格信息" align="center" width="150">
            <template slot-scope="scope">
              <div class="price-info">
                <div class="current-price">¥{{ scope.row.currentPrice }}</div>
                <div class="original-price">¥{{ scope.row.originalPrice }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="库存" align="center" prop="stock" width="100">
            <template slot-scope="scope">
              <el-tag 
                :type="scope.row.stock < 10 ? 'danger' : scope.row.stock < 50 ? 'warning' : 'success'"
                size="small"
              >
                {{ scope.row.stock }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="销量" align="center" prop="salesVolume" width="100">
            <template slot-scope="scope">
              <el-tag type="info" size="small">{{ scope.row.salesVolume }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
                {{ scope.row.status === 1 ? '上架' : '下架' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>

        <div v-if="goodsList.length === 0 && !goodsLoading" class="empty-goods">
          <i class="el-icon-goods"></i>
          <p>该分类下暂无商品信息</p>
          <el-button type="primary" size="small" @click="handleAddGoods">添加商品</el-button>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-plus" @click="handleAddGoods">添加商品</el-button>
        <el-button @click="goodsDialogVisible = false" icon="el-icon-close">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改商品信息对话框 -->
    <el-dialog
      :title="goodsFormTitle"
      :visible.sync="goodsFormVisible"
      width="900px"
      append-to-body
      class="goods-form-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="goodsForm" :model="goodsForm" :rules="goodsFormRules" label-width="120px" class="goods-form">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="分类ID" prop="parentId">
              <el-input v-model="goodsForm.parentId" placeholder="自动填充" disabled class="goods-form-input" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类名称" prop="categoryName">
              <el-input v-model="goodsForm.categoryName" placeholder="自动填充" disabled class="goods-form-input" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="商品名称" prop="goodsName">
              <el-input v-model="goodsForm.goodsName" placeholder="请输入商品名称" class="goods-form-input" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品状态" prop="status">
              <el-radio-group v-model="goodsForm.status" class="status-radio-group">
                <el-radio :label="1" class="status-radio">上架</el-radio>
                <el-radio :label="0" class="status-radio">下架</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="原价" prop="originalPrice">
              <el-input-number 
                v-model="goodsForm.originalPrice" 
                :min="0" 
                :step="0.01" 
                :precision="2" 
                :controls="false" 
                style="width: 100%" 
                placeholder="请输入原价" 
                class="goods-form-input-number" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现价" prop="currentPrice">
              <el-input-number 
                v-model="goodsForm.currentPrice" 
                :min="0" 
                :step="0.01" 
                :precision="2" 
                :controls="false" 
                style="width: 100%" 
                placeholder="请输入现价" 
                class="goods-form-input-number" 
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="库存" prop="stock">
              <el-input-number 
                v-model="goodsForm.stock" 
                :min="0" 
                :step="1" 
                :controls="false" 
                style="width: 100%" 
                placeholder="请输入库存" 
                class="goods-form-input-number" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销量" prop="salesVolume">
              <el-input-number 
                v-model="goodsForm.salesVolume" 
                :min="0" 
                :step="1" 
                :controls="false" 
                style="width: 100%" 
                placeholder="请输入销量" 
                class="goods-form-input-number" 
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="商品描述" prop="goodsDesc">
              <el-input 
                v-model="goodsForm.goodsDesc" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入商品描述" 
                class="goods-form-textarea" 
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="封面图" prop="coverImg" class="image-item">
              <image-upload 
                v-model="goodsForm.coverImg" 
                :file-size="30"
                :file-type="['png', 'jpg', 'jpeg', 'gif', 'webp']"
              />
              <div class="upload-tip">建议尺寸：800x800px，支持PNG、JPG、JPEG、GIF、WEBP格式，大小不超过30MB</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详情图" prop="detailImgs" class="image-item">
              <image-upload 
                v-model="goodsForm.detailImgs" 
                :file-size="30"
                :file-type="['png', 'jpg', 'jpeg', 'gif', 'webp']"
              />
              <div class="upload-tip">建议尺寸：1200x800px，支持PNG、JPG、JPEG、GIF、WEBP格式，大小不超过30MB</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button 
          type="primary" 
          icon="el-icon-check" 
          @click="submitGoodsForm" 
          class="submit-btn"
          :loading="goodsSubmitLoading"
        >
          {{ goodsSubmitLoading ? '提交中...' : '确 定' }}
        </el-button>
        <el-button @click="cancelGoodsForm" icon="el-icon-close" class="cancel-btn">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改商品类别对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="650px"
      append-to-body
      class="category-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="category-form">
        <el-form-item label="父分类ID" prop="parentId">
          <el-input
            v-model="form.parentId"
            placeholder="请输入父分类ID，顶级分类请输入0"
            class="category-input"
            prefix-icon="el-icon-connection"
          />
        </el-form-item>

        <el-form-item label="分类名称" prop="categoryName">
          <el-input
            v-model="form.categoryName"
            placeholder="请输入分类名称"
            class="category-input"
            prefix-icon="el-icon-edit"
          />
        </el-form-item>
        <el-form-item label="排序值" prop="sortOrder">
          <el-input-number
            v-model="form.sortOrder"
            :min="1"
            :max="5"
            controls-position="right"
            placeholder="请输入排序值(1-5)"
            style="width: 100%"
            class="category-input-number"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status" class="status-radio-group">
            <el-radio :label="0" class="status-radio">禁用</el-radio>
            <el-radio :label="1" class="status-radio">启用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="submitLoading"
          @click="submitForm"
          class="submit-btn"
          icon="el-icon-check"
        >
          {{ submitLoading ? '提交中...' : '确 定' }}
        </el-button>
        <el-button
          @click="cancel"
          class="cancel-btn"
          icon="el-icon-close"
        >
          取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCategory, listAllCategory, getCategory, delCategory, addCategory, updateCategory, getGoodsByCategoryId, addGoodsInfo, updateGoodsInfo, getGoodsInfo } from "@/api/category/category"

export default {
  name: "Category",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品类别表格数据
      categoryList: [],
      // 分类选项数据
      categoryOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 提交加载状态
      submitLoading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        parentId: null,
        categoryName: null,
        sortOrder: null,
        status: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        parentId: [
          { required: true, message: "父分类ID不能为空", trigger: "blur" },
          { pattern: /^[0-9]+$/, message: "父分类ID必须为数字", trigger: "blur" }
        ],
        categoryName: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
          { min: 2, max: 50, message: "分类名称长度在 2 到 50 个字符", trigger: "blur" }
        ],
        sortOrder: [
          { required: true, message: "排序不能为空", trigger: "change" },
          { type: "number", min: 1, max: 5, message: "排序值在 1 到 5 之间", trigger: "change" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ]
      },
      // 二级菜单相关数据
      goodsDialogVisible: false,
      goodsDialogTitle: "",
      goodsList: [],
      goodsLoading: false,
      currentCategory: {},
      // 商品表单相关数据
      goodsFormVisible: false,
      goodsFormTitle: "",
      goodsSubmitLoading: false,
      goodsForm: {
        id: null,
        parentId: "",
        categoryName: "",
        goodsName: "",
        goodsDesc: "",
        originalPrice: 0,
        currentPrice: 0,
        stock: 0,
        salesVolume: 0,
        coverImg: "",
        detailImgs: "",
        status: 1
      },
      goodsFormRules: {
        goodsName: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
          { min: 2, max: 100, message: "商品名称长度在 2 到 100 个字符", trigger: "blur" }
        ],
        originalPrice: [
          { required: true, message: "原价不能为空", trigger: "change" },
          { type: "number", min: 0, message: "原价必须大于等于0", trigger: "change" }
        ],
        currentPrice: [
          { required: true, message: "现价不能为空", trigger: "change" },
          { type: "number", min: 0, message: "现价必须大于等于0", trigger: "change" }
        ],
        stock: [
          { required: true, message: "库存不能为空", trigger: "change" },
          { type: "number", min: 0, message: "库存必须大于等于0", trigger: "change" }
        ],
        salesVolume: [
          { required: true, message: "销量不能为空", trigger: "change" },
          { type: "number", min: 0, message: "销量必须大于等于0", trigger: "change" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ]
      }
    }
  },
  created() {
    this.getCategoryOptions().then(() => {
      this.getList()
    })
  },
  methods: {
    /** 查询商品类别列表 */
    getList() {
      this.loading = true
      listCategory(this.queryParams).then(response => {
        this.categoryList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.error("查询分类列表失败：", error)
        this.$modal.msgError("查询分类列表失败")
      })
    },
    /** 获取分类选项数据 */
    getCategoryOptions() {
      return listAllCategory().then(response => {
        this.categoryOptions = response.rows
        return response
      }).catch(error => {
        console.error("获取分类选项失败：", error)
        this.$modal.msgError("获取分类选项失败")
        throw error
      })
    },
    /** 根据分类ID获取分类名称 */
    getCategoryNameById(categoryId) {
      const category = this.categoryOptions.find(item => item.categoryId === categoryId)
      return category ? category.categoryName : categoryId
    },
    /** 获取排序值显示文本 */
    getSortOrderText(sortOrder) {
      const sortOrderNum = parseInt(sortOrder)
      const sortMap = {
        1: '最上方(1)',
        2: '上方(2)',
        3: '中间(3)',
        4: '下方(4)',
        5: '最下方(5)'
      }
      return sortMap[sortOrderNum] || sortOrder
    },
    /** 获取排序值标签类型 */
    getSortOrderTagType(sortOrder) {
      const sortOrderNum = parseInt(sortOrder)
      const typeMap = {
        1: 'success',
        2: 'primary',
        3: 'warning',
        4: 'info',
        5: 'danger'
      }
      return typeMap[sortOrderNum] || 'info'
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.submitLoading = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        categoryId: null,
        parentId: "0",
        categoryName: null,
        sortOrder: 1,
        status: 1,
        createTime: null
      }
      this.submitLoading = false
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      // 确保数字字段类型正确
      if (this.queryParams.status !== null && this.queryParams.status !== '') {
        this.queryParams.status = parseInt(this.queryParams.status)
      }
      if (this.queryParams.sortOrder !== null && this.queryParams.sortOrder !== '') {
        this.queryParams.sortOrder = parseInt(this.queryParams.sortOrder)
      }
      if (this.queryParams.parentId !== null && this.queryParams.parentId !== '') {
        this.queryParams.parentId = this.queryParams.parentId.toString()
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        parentId: null,
        categoryName: null,
        sortOrder: null,
        status: null,
      }
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.categoryId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加商品类别"
      // 确保分类选项已加载
      if (this.categoryOptions.length === 0) {
        this.getCategoryOptions()
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const categoryId = row.categoryId || this.ids
      getCategory(categoryId).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改商品类别"
        // 确保分类选项已加载
        if (this.categoryOptions.length === 0) {
          this.getCategoryOptions()
        }
      }).catch(error => {
        console.error("获取分类详情失败：", error)
        this.$modal.msgError("获取分类详情失败")
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitLoading = true
          // 确保数据格式正确
          const submitData = {
            ...this.form,
            parentId: this.form.parentId === "0" ? 0 : parseInt(this.form.parentId),
            sortOrder: parseInt(this.form.sortOrder),
            status: parseInt(this.form.status)
          }

          if (this.form.categoryId != null) {
            updateCategory(submitData).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
              this.getCategoryOptions()
            }).catch(error => {
              this.$modal.msgError("修改失败：" + (error.message || "未知错误"))
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            addCategory(submitData).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
              this.getCategoryOptions()
            }).catch(error => {
              this.$modal.msgError("新增失败：" + (error.message || "未知错误"))
            }).finally(() => {
              this.submitLoading = false
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const categoryIds = row.categoryId || this.ids
      this.$modal.confirm('是否确认删除商品类别编号为"' + categoryIds + '"的数据项？').then(function() {
        return delCategory(categoryIds)
      }).then(() => {
        this.getList()
        this.getCategoryOptions()
        this.$modal.msgSuccess("删除成功")
      }).catch(error => {
        this.$modal.msgError("删除失败：" + (error.message || "未知错误"))
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('category/category/export', {
        ...this.queryParams
      }, `category_${new Date().getTime()}.xlsx`)
    },

    /** 查看商品按钮操作 */
    handleViewGoods(row) {
      this.currentCategory = row
      this.goodsDialogTitle = `查看分类"${row.categoryName}"下的商品`
      this.goodsDialogVisible = true
      this.loadGoodsByCategory(row.categoryId)
    },

    /** 根据分类ID加载商品信息 */
    loadGoodsByCategory(categoryId) {
      this.goodsLoading = true
      this.goodsList = []
      
      getGoodsByCategoryId(categoryId).then(response => {
        this.goodsList = response.rows || []
        this.goodsLoading = false
      }).catch(error => {
        console.error("查询商品信息失败：", error)
        this.$modal.msgError("查询商品信息失败")
        this.goodsLoading = false
      })
    },

    /** 添加商品按钮操作 */
    handleAddGoods() {
      this.resetGoodsForm()
      this.goodsForm.parentId = this.currentCategory.categoryId
      this.goodsForm.categoryName = this.currentCategory.categoryName
      this.goodsFormTitle = `添加商品到分类"${this.currentCategory.categoryName}"`
      this.goodsFormVisible = true
    },

    /** 重置商品表单 */
    resetGoodsForm() {
      this.goodsForm = {
        id: null,
        parentId: "",
        categoryName: "",
        goodsName: "",
        goodsDesc: "",
        originalPrice: 0,
        currentPrice: 0,
        stock: 0,
        salesVolume: 0,
        coverImg: "",
        detailImgs: "",
        status: 1
      }
      this.$nextTick(() => {
        this.$refs["goodsForm"] && this.$refs["goodsForm"].clearValidate()
      })
    },

    /** 提交商品表单 */
    submitGoodsForm() {
      this.$refs["goodsForm"].validate(valid => {
        if (valid) {
          this.goodsSubmitLoading = true
          
          // 确保数据格式正确
          const submitData = {
            ...this.goodsForm,
            parentId: this.goodsForm.parentId.toString(),
            originalPrice: parseFloat(this.goodsForm.originalPrice),
            currentPrice: parseFloat(this.goodsForm.currentPrice),
            stock: parseInt(this.goodsForm.stock),
            salesVolume: parseInt(this.goodsForm.salesVolume),
            status: parseInt(this.goodsForm.status)
          }

          addGoodsInfo(submitData).then(response => {
            this.$modal.msgSuccess("商品添加成功")
            this.goodsFormVisible = false
            // 刷新商品列表
            this.loadGoodsByCategory(this.currentCategory.categoryId)
            // 重置表单
            this.resetGoodsForm()
          }).catch(error => {
            this.$modal.msgError("商品添加失败：" + (error.message || "未知错误"))
          }).finally(() => {
            this.goodsSubmitLoading = false
          })
        }
      })
    },

    /** 取消商品表单 */
    cancelGoodsForm() {
      this.goodsFormVisible = false
      this.resetGoodsForm()
    }
  }
}
</script>

<style scoped>
.el-tag {
  margin-right: 5px;
  border-radius: 4px;
  font-weight: 500;
}

.el-tag--success {
  background-color: #f0f9ff;
  border-color: #67c23a;
  color: #67c23a;
  font-weight: 600;
}

.el-tag--danger {
  background-color: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
  font-weight: 600;
}

.el-tag--info {
  background-color: #f4f4f5;
  border-color: #909399;
  color: #909399;
  font-weight: 600;
}

.el-tag--primary {
  background-color: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
  font-weight: 600;
}

.el-tag--warning {
  background-color: #fdf6ec;
  border-color: #e6a23c;
  color: #e6a23c;
  font-weight: 600;
}

.page-header {
  margin-bottom: 20px;
  padding: 25px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.page-header h2 {
  margin: 0 0 10px 0;
  color: white;
  font-size: 22px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.el-input,
.el-select,
.el-input-number {
  width: 100%;
}

.el-input__inner,
.el-select .el-input__inner,
.el-input-number__decrease,
.el-input-number__increase {
  border-radius: 4px;
  transition: all 0.3s ease;
}

.el-input__inner:focus,
.el-select .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.el-radio-group {
  display: flex;
  gap: 20px;
}

.el-radio__label {
  font-weight: 500;
  color: #606266;
}

.el-dialog__body {
  padding: 20px 30px;
}

.el-dialog__header {
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
  padding: 20px 30px;
}

.el-dialog__title {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
}

.el-dialog__footer {
  background: #f8f9fa;
  border-top: 1px solid #e4e7ed;
  padding: 15px 30px;
  text-align: right;
}

.el-dialog__footer .el-button {
  margin-left: 10px;
  border-radius: 4px;
}

.el-table {
  margin-top: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  overflow: hidden;
  background: white;
  width: 100%;
  table-layout: auto;
}

.el-table .el-table__body-wrapper {
  overflow-x: auto;
}

.el-table .el-table__header-wrapper {
  overflow-x: hidden;
}

.el-table .el-table__fixed-header-wrapper {
  overflow-x: hidden;
}

.el-table .el-table__body {
  width: 100%;
}

.el-table .el-table__header {
  width: 100%;
}

.el-table .el-table__fixed-header-wrapper {
  width: 100%;
}

.el-table .el-table__fixed-body-wrapper {
  width: 100%;
}

.el-table .el-table__fixed-footer-wrapper {
  width: 100%;
}

.el-table .el-table__fixed-right-patch {
  width: 100%;
}

.el-table .el-table__fixed-right {
  width: 100%;
}

.el-table .el-table__fixed-left {
  width: 100%;
}

@media (max-width: 1200px) {
  .el-table {
    font-size: 12px;
  }

  .el-table th,
  .el-table td {
    padding: 8px 0;
  }
}

@media (max-width: 768px) {
  .el-form--inline .el-form-item {
    margin-bottom: 10px;
  }

  .el-form--inline .el-form-item label {
    width: 60px;
  }
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  border-bottom: 2px solid #e4e7ed;
  padding: 15px 0;
}

.el-table td {
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 0;
}

.el-table tr:hover > td {
  background-color: #f5f7fa;
  transition: background-color 0.3s ease;
}

.el-table tr {
  transition: all 0.3s ease;
}

.el-table tr:nth-child(even) {
  background-color: #fafafa;
}

.el-table tr:nth-child(even):hover > td {
  background-color: #f0f2f5;
}

.el-table .el-table__row--striped {
  background-color: #fafafa;
}

.el-table .el-table__row--striped:hover > td {
  background-color: #f0f2f5;
}

.el-table .el-table__row--striped td {
  border-bottom: 1px solid #f0f0f0;
}

.el-table .el-table__row--striped td:last-child {
  border-bottom: none;
}

.el-table .el-table__row--striped td:first-child {
  border-left: 3px solid #409eff;
}

.el-table .el-table__row--striped:hover td:first-child {
  border-left-color: #67c23a;
}

.el-table .el-table__row--striped td:first-child {
  transition: border-left-color 0.3s ease;
  padding-left: 15px;
}

.el-table .el-table__row--striped td:last-child {
  padding-right: 15px;
}

.el-table .el-table__row--striped td {
  padding: 15px 0;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
  padding: 15px 20px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.el-pagination .el-pager li {
  border-radius: 4px;
  margin: 0 2px;
  transition: all 0.3s ease;
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
  border-radius: 4px;
  transition: all 0.3s ease;
}

.el-pagination .el-pager li:hover,
.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  background-color: #409eff;
  color: white;
}

.el-form--inline .el-form-item {
  margin-right: 15px;
}

/* 弹框美化样式 */
.category-dialog .el-dialog {
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.category-dialog .el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 25px 30px;
  border-bottom: none;
  position: relative;
}

.category-dialog .el-dialog__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.category-dialog .el-dialog__title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.category-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
}

.category-dialog .el-dialog__headerbtn:hover .el-dialog__close {
  transform: rotate(90deg);
  color: #f0f0f0;
}

.category-dialog .el-dialog__body {
  padding: 30px;
  background: #fafbfc;
}

.category-form .el-form-item {
  margin-bottom: 25px;
  position: relative;
}

.category-form .el-form-item__label {
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
  margin-bottom: 8px;
  display: block;
}

.category-form .el-form-item__label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

.category-input .el-input__inner,
.category-input-number .el-input__inner {
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

.category-input .el-input__inner:focus,
.category-input-number .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.category-input .el-input__prefix {
  color: #667eea;
  font-size: 16px;
}



.status-radio-group {
  display: flex;
  gap: 30px;
  margin-top: 10px;
}

.status-radio .el-radio__input.is-checked .el-radio__inner {
  border-color: #667eea;
  background: #667eea;
}

.status-radio .el-radio__input.is-checked + .el-radio__label {
  color: #667eea;
  font-weight: 600;
}

.status-radio .el-radio__inner {
  border: 2px solid #dcdfe6;
  width: 18px;
  height: 18px;
}

.status-radio .el-radio__inner::after {
  width: 6px;
  height: 6px;
  background: white;
}

.category-dialog .el-dialog__footer {
  background: #f8f9fa;
  padding: 20px 30px;
  border-top: 1px solid #e4e7ed;
  text-align: right;
}

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-right: 15px;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.submit-btn:active {
  transform: translateY(0);
}

.cancel-btn {
  border: 2px solid #dcdfe6;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  background: white;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.1);
}

.cancel-btn:active {
  transform: translateY(0);
}



/* 数字输入框美化 */
.category-input-number .el-input-number__decrease,
.category-input-number .el-input-number__increase {
  border: 2px solid #e4e7ed;
  background: #f8f9fa;
  color: #606266;
  transition: all 0.3s ease;
}

.category-input-number .el-input-number__decrease:hover,
.category-input-number .el-input-number__increase:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .category-dialog .el-dialog {
    width: 95% !important;
    margin: 20px auto;
  }

  .category-dialog .el-dialog__body {
    padding: 20px;
  }

  .status-radio-group {
    flex-direction: column;
    gap: 15px;
  }
}

.el-form--inline {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.el-button--mini {
  margin-right: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.el-button--text {
  padding: 0;
  margin: 0 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.el-button--mini:hover,
.el-button--text:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mb8 {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 二级菜单弹出框样式 */
.goods-dialog .el-dialog {
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.goods-dialog .el-dialog__header {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  padding: 25px 30px;
  border-bottom: none;
  position: relative;
}

.goods-dialog .el-dialog__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.goods-dialog .el-dialog__title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.goods-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
}

.goods-dialog .el-dialog__headerbtn:hover .el-dialog__close {
  transform: rotate(90deg);
  color: #f0f0f0;
}

.goods-dialog .el-dialog__body {
  padding: 30px;
  background: #fafbfc;
}

.goods-dialog-content {
  min-height: 400px;
}

.category-info {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.category-info .el-descriptions {
  margin: 0;
}

.category-info .el-descriptions__label {
  font-weight: 600;
  color: #2c3e50;
}

.category-info .el-descriptions__content {
  color: #409eff;
  font-weight: 500;
}

.el-divider {
  margin: 25px 0;
  color: #409eff;
  font-weight: 600;
  font-size: 16px;
}

.el-divider i {
  margin-right: 8px;
  font-size: 18px;
}

.goods-table {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.goods-table .el-table__header {
  background: #f5f7fa;
}

.goods-table .el-table__row:hover > td {
  background: #f0f9ff !important;
}

.goods-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.goods-name i {
  color: #409eff;
  font-size: 16px;
}

.price-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.current-price {
  font-size: 16px;
  font-weight: 600;
  color: #f56c6c;
}

.original-price {
  font-size: 12px;
  color: #909399;
  text-decoration: line-through;
}

.empty-goods {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-goods i {
  font-size: 48px;
  margin-bottom: 20px;
  color: #c0c4cc;
}

.empty-goods p {
  margin: 10px 0 20px 0;
  font-size: 16px;
  color: #606266;
}

.goods-dialog .el-dialog__footer {
  background: #f8f9fa;
  padding: 20px 30px;
  border-top: 1px solid #e4e7ed;
  text-align: right;
}

.goods-dialog .el-dialog__footer .el-button {
  margin-left: 10px;
  border-radius: 6px;
  padding: 10px 20px;
}

.goods-dialog .el-dialog__footer .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.goods-dialog .el-dialog__footer .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .goods-dialog .el-dialog {
    width: 95% !important;
    margin: 20px auto;
  }
  
  .goods-dialog .el-dialog__body {
    padding: 20px;
  }
  
  .category-info {
    padding: 15px;
  }
  
  .goods-table {
    font-size: 12px;
  }
}

/* 商品表单对话框样式 */
.goods-form-dialog .el-dialog {
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.goods-form-dialog .el-dialog__header {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 25px 30px;
  border-bottom: none;
  position: relative;
}

.goods-form-dialog .el-dialog__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.goods-form-dialog .el-dialog__title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.goods-form-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
}

.goods-form-dialog .el-dialog__headerbtn:hover .el-dialog__close {
  transform: rotate(90deg);
  color: #f0f0f0;
}

.goods-form-dialog .el-dialog__body {
  padding: 30px;
  background: #fafbfc;
}

.goods-form {
  padding: 0 20px;
}

.goods-form .el-form-item {
  margin-bottom: 25px;
  position: relative;
}

.goods-form .el-form-item__label {
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
  margin-bottom: 8px;
  display: block;
}

.goods-form .el-form-item__label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

.goods-form-input .el-input__inner,
.goods-form-input-number .el-input__inner,
.goods-form-textarea .el-textarea__inner {
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

.goods-form-input .el-input__inner:focus,
.goods-form-input-number .el-input__inner:focus,
.goods-form-textarea .el-textarea__inner:focus {
  border-color: #4facfe;
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
  transform: translateY(-1px);
}

.goods-form-input .el-input__inner:disabled {
  background: #f5f7fa;
  color: #909399;
  border-color: #dcdfe6;
}

.goods-form-input-number .el-input-number__decrease,
.goods-form-input-number .el-input-number__increase {
  border: 2px solid #e4e7ed;
  background: #f8f9fa;
  color: #606266;
  transition: all 0.3s ease;
}

.goods-form-input-number .el-input-number__decrease:hover,
.goods-form-input-number .el-input-number__increase:hover {
  background: #4facfe;
  color: white;
  border-color: #4facfe;
}

.goods-form .status-radio-group {
  display: flex;
  gap: 30px;
  margin-top: 10px;
}

.goods-form .status-radio .el-radio__input.is-checked .el-radio__inner {
  border-color: #4facfe;
  background: #4facfe;
}

.goods-form .status-radio .el-radio__input.is-checked + .el-radio__label {
  color: #4facfe;
  font-weight: 600;
}

.goods-form .status-radio .el-radio__inner {
  border: 2px solid #dcdfe6;
  width: 18px;
  height: 18px;
}

  .goods-form .status-radio .el-radio__inner::after {
    width: 6px;
    height: 6px;
    background: white;
  }

  .image-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .upload-tip {
    margin-top: 8px;
    font-size: 12px;
    color: #909399;
    line-height: 1.4;
  }

.goods-form-dialog .el-dialog__footer {
  background: #f8f9fa;
  padding: 20px 30px;
  border-top: 1px solid #e4e7ed;
  text-align: right;
}

.goods-form-dialog .submit-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-right: 15px;
}

.goods-form-dialog .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.3);
}

.goods-form-dialog .submit-btn:active {
  transform: translateY(0);
}

.goods-form-dialog .cancel-btn {
  border: 2px solid #dcdfe6;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  background: white;
  transition: all 0.3s ease;
}

.goods-form-dialog .cancel-btn:hover {
  border-color: #4facfe;
  color: #4facfe;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.1);
}

.goods-form-dialog .cancel-btn:active {
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .goods-form-dialog .el-dialog {
    width: 95% !important;
    margin: 20px auto;
  }
  
  .goods-form-dialog .el-dialog__body {
    padding: 20px;
  }
  
  .goods-form {
    padding: 0 10px;
  }
  
  .goods-form .status-radio-group {
    flex-direction: column;
    gap: 15px;
  }
}
</style>
